﻿<Page x:Class="TreeBuilder.Help.BindersPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:Help="clr-namespace:TreeBuilder.Help" xmlns:TreeBuilder="clr-namespace:TreeBuilder" xmlns:ctrl="clr-namespace:Elderos.Controls;assembly=Elderos.Controls" mc:Ignorable="d" 
      d:DesignHeight="800" d:DesignWidth="640"
	Title="Lines, Arrows &amp; Triangles">
    <Page.Resources>
        <ResourceDictionary Source="pack://application:,,,/Help/HelpStyles.xaml"/>
    </Page.Resources>
    <Grid>
        <ctrl:HelpMasterPage Name="MasterPage"  AllowDrop="False">
            <ctrl:HelpMasterPage.Title>Binders</ctrl:HelpMasterPage.Title>
            <ctrl:HelpMasterPage.Content>
                <StackPanel MinHeight="400">
                    <RichTextBox Name="RichTextBox" BorderThickness="0" IsReadOnly="True">
                        <FlowDocument>
                            <Paragraph Margin="0,0,0,5">
                                There are three ways of binding two nodes to each other -
                                <Run FontWeight="Bold">line</Run>,
                                <Run FontWeight="Bold">arrow</Run> and
                                <Run FontWeight="Bold">triangle</Run>
                                <Run FontWeight="Bold">binders</Run>.
                            </Paragraph>
                            <Paragraph Margin="0,0,0,5">
                                It's very easy to create a binder. Just do following steps:
                            </Paragraph>
                            <List Margin="0,0,0,5" MarkerStyle="Decimal">
                                <ListItem>
                                    <Paragraph Margin="0">
                                        Click on the source node (node menu appears above).
                                    </Paragraph>
                                </ListItem>
                                <ListItem>
                                    <Paragraph Margin="0">
                                        Click on the line, arrow or triangle button (the source node changes its background color).
                                    </Paragraph>
                                </ListItem>
                                <ListItem>
                                    <Paragraph Margin="0">
                                        Click on the target node you want to bind.
                                    </Paragraph>
                                </ListItem>
                            </List>
                            <Paragraph Margin="0,0,0,5">
                                Done. If you reached step 2, but you want to cancel binding, just click anywhere else.
                            </Paragraph>
                            <Paragraph Margin="0,0,0,5" FontSize="10">
                                (The Tree Canvas below is fully operable. You can try to perform any action there.)
                            </Paragraph>
                        </FlowDocument>
                    </RichTextBox>
                    <TreeBuilder:Tree Height="200"/>
                    <RichTextBox Name="BottomBox" BorderThickness="0" IsReadOnly="True">
                        <FlowDocument>
                            <Paragraph Margin="0,5,0,0">
                                If you do right click on a binder, its context menu appears.
                                There is an explanation to its items below:
                            </Paragraph>
                            <List Margin="0,0,0,5">
                                <ListItem>
                                    <Paragraph Margin="0">
                                        <Run FontWeight="Bold">Color</Run> - I think I don't need to explain it;
                                    </Paragraph>
                                </ListItem>
                                <ListItem>
                                    <Paragraph Margin="0">
                                        <Run FontWeight="Bold">Thickness</Run> - the thickness of the main line;
                                    </Paragraph>
                                </ListItem>
                                <ListItem>
                                    <Paragraph Margin="0">
                                        <Run FontWeight="Bold">Dashes</Run> - an array of numbers separated by space.
                                        Each number specifies an interval of dashes. Then the line would by dashed recursively.
                                        For example, if you write "1 2 3" there would be 1 pixel colored, 2 pixels transparent,
                                        3 pixels colored, 1 pixel transparent, 2 pixels colored, 3 pixels transparent and so on.
                                    </Paragraph>
                                </ListItem>
                                <ListItem>
                                    <Paragraph Margin="0">
                                        <Run FontWeight="Bold">Vertical offset</Run> (arrows only) - a minimal number of pixel offset
                                        from node. See options page for more info.
                                    </Paragraph>
                                </ListItem>
                                <ListItem>
                                    <Paragraph Margin="0">
                                        <Run FontWeight="Bold">Delete</Run> - deletes the binder.
                                    </Paragraph>
                                </ListItem>
                            </List>
                            <Paragraph Margin="0,5,0,0">
                                Once bound, two nodes remain bound. I mean, if you drag the node to another place,
                                the line follows it. Just try and you'll see.
                            </Paragraph>
                            <Paragraph Style="{StaticResource HeaderStyle}" Margin="10,10,0,0">Tip</Paragraph>
                            <Paragraph Margin="0,5,0,0">
                                When you aim the mouse on a line or a triangle, it becomes thicker. Unfortunately, I cannot do
                                the same with arrows. It's complicated to hit, isn't it?
                                That's why I recommend clicking on arrow head, it's bigger than
                                the line and easier to hit.
                            </Paragraph>
                        </FlowDocument>
                    </RichTextBox>
                </StackPanel>
            </ctrl:HelpMasterPage.Content>
        </ctrl:HelpMasterPage>
    </Grid>
</Page>
